<template>
  <div class="team-page section-padding bg-gray-50">
    <div class="container mx-auto px-4">
      <!-- 教师队伍区域 -->
      <div class="mb-16">
        <div class="flex items-center mb-6">
          <h3 class="text-3xl font-bold text-blue-800 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            教师队伍
          </h3>
          <div class="flex-grow h-0.5 bg-blue-400 ml-3"></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <router-link 
            v-for="teacher in teachers" 
            :key="teacher.id"
            :to="`/team-detail/${teacher.id}`"
            class="block"
          >
            <div class="team-card bg-white rounded-xl shadow hover:shadow-xl p-5 border border-gray-100 hover:border-blue-200">
              <div class="aspect-square mb-4 overflow-hidden rounded-lg">
                <img 
                  :src="teacher.avatar" 
                  alt="教师头像" 
                  class="w-full h-full object-cover transition-transform hover:scale-105 duration-500"
                >
              </div>
              <h4 class="font-bold text-xl mb-2 text-gray-800">{{ teacher.name }}</h4>
              <p class="text-gray-600 mb-3">{{ teacher.title }}</p>
              <p class="text-gray-700 text-sm line-clamp-3">{{ teacher.desc }}</p>
            </div>
          </router-link>
        </div>
      </div>

      <!-- 学生风采区域 -->
      <div class="mb-16">
        <div class="flex items-center mb-6">
          <h3 class="text-3xl font-bold text-blue-800 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
            学生风采
          </h3>
          <div class="flex-grow h-0.5 bg-blue-400 ml-3"></div>
        </div>

        <!-- 分组按钮（添加激活状态） -->
        <div class="mb-6 flex flex-wrap gap-3">
          <!-- 软件组：初始激活 -->
          <button 
            @click="goToGroup('软件组')"
            :class="activeGroup === '软件组' ? 'active' : ''"
            class="px-4 py-2 bg-white border border-gray-200 rounded-full flex items-center gap-2 text-sm font-medium text-gray-700 hover:border-blue-400 hover:text-blue-600 transition-all shadow-sm"
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
              <line x1="8" y1="21" x2="16" y2="21"/>
              <line x1="12" y1="17" x2="12" y2="21"/>
            </svg>
            软件组 
            <span class="bg-gray-200 text-gray-700 rounded-full w-5 h-5 flex items-center justify-center text-xs">5</span>
          </button>

          <!-- 硬件组 -->
          <button 
            @click="goToGroup('硬件组')"
            :class="activeGroup === '硬件组' ? 'active' : ''"
            class="px-4 py-2 bg-white border border-gray-200 rounded-full flex items-center gap-2 text-sm font-medium text-gray-700 hover:border-blue-400 hover:text-blue-600 transition-all shadow-sm"
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="16 18 22 12 16 6"/>
              <polyline points="8 6 2 12 8 18"/>
            </svg>
            硬件组 
            <span class="bg-gray-200 text-gray-700 rounded-full w-5 h-5 flex items-center justify-center text-xs">9</span>
          </button>

          <!-- 理论组 -->
          <button 
            @click="goToGroup('理论组')"
            :class="activeGroup === '理论组' ? 'active' : ''"
            class="px-4 py-2 bg-white border border-gray-200 rounded-full flex items-center gap-2 text-sm font-medium text-gray-700 hover:border-blue-400 hover:text-blue-600 transition-all shadow-sm"
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
            </svg>
            理论组 
            <span class="bg-gray-200 text-gray-700 rounded-full w-5 h-5 flex items-center justify-center text-xs">2</span>
          </button>

          <!-- 其他组 -->
          <button 
            @click="goToGroup('其他组')"
            :class="activeGroup === '其他组' ? 'active' : ''"
            class="px-4 py-2 bg-white border border-gray-200 rounded-full flex items-center gap-2 text-sm font-medium text-gray-700 hover:border-blue-400 hover:text-blue-600 transition-all shadow-sm"
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"/>
              <line x1="12" y1="8" x2="12" y2="12"/>
              <line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            其他组 
            <span class="bg-gray-200 text-gray-700 rounded-full w-5 h-5 flex items-center justify-center text-xs">15</span>
          </button>
        </div>

        <!-- 学生信息-->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <div 
            v-for="student in filteredStudents" 
            :key="student.id"
            class="student-card bg-white rounded-xl shadow hover:shadow-lg transition-all p-5 flex gap-4"
          >
            <div class="w-20 h-20 flex-shrink-0">
              <img 
                :src="student.avatar" 
                alt="学生头像" 
                class="w-full h-full object-cover rounded-full border-2 border-gray-200"
              >
            </div>
            <div>
              <h4 class="font-bold text-lg mb-1 text-gray-800">{{ student.name }}</h4>
              <p class="text-gray-600 text-sm mb-1">年级：{{ student.grade }}</p>
              <p class="text-gray-600 text-sm mb-1">组别：{{ student.group }}</p>
              <p class="text-gray-600 text-sm">研究方向：{{ student.direction }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 优秀毕业生区域（保持不变） -->
      <div>
        <div class="flex items-center mb-6">
          <h3 class="text-3xl font-bold text-blue-800 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
              <path d="M6 12v5c3 3 9 3 12 0v-5"/>
            </svg>
            优秀毕业生
          </h3>
          <div class="flex-grow h-0.5 bg-blue-400 ml-3"></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
          <div 
            v-for="grad in graduatedStudents" 
            :key="grad.id"
            class="student-card bg-white rounded-xl shadow hover:shadow-md transition-all p-4 text-center"
          >
            <img 
              :src="grad.avatar" 
              alt="毕业生头像" 
              class="w-20 h-20 mx-auto object-cover rounded-full mb-3 border-2 border-gray-100"
            >
            <h4 class="font-bold text-base mb-1 text-gray-800">{{ grad.name }}</h4>
            <p class="text-gray-600 text-sm mb-1">{{ grad.graduationYear }}届 {{ grad.degree }}</p>
            <p class="text-gray-700 text-sm line-clamp-2">{{ grad.company }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuestTeam',
  data() {
    return {
      activeGroup: '软件组', 
      teachers: [
        { id: 1, name: '刘伯阳', title: '副教授 / 团队负责人', desc: '研究方向为软件无线电、边缘计算、智能通信...', avatar: require('../../assets/images/DrLiuBY.jpg') },
        { id: 2, name: '杜炜民', title: '讲师', desc: 'xxxxxxxx...', avatar: 'https://picsum.photos/id/1074/200/200' },
        { id: 3, name: '万鹏武', title: '副教授', desc: '研究方向为信号处理、传感网目标定位...', avatar: require('../../assets/images/WanPW.jpg') },
        { id: 4, name: '刘超文', title: '讲师', desc: '研究方向为B5G&6G通信中的索引调制技术...', avatar: require('../../assets/images/LiuCW.jpg') }
      ],
      students: [
        { id: 1, name: '刘心如', grade: '2024级 硕士', group: '软件组', direction: '无人机通信协议优化', avatar: 'https://picsum.photos/id/1011/200/200' },
        { id: 2, name: '贾申岳', grade: '2024级 硕士', group: '软件组', direction: '嵌入式软件开发', avatar: 'https://picsum.photos/id/1014/200/200' },
        { id: 3, name: '郭向涛', grade: '2024级 硕士', group: '硬件组', direction: 'FPGA信号处理电路设计', avatar: 'https://picsum.photos/id/1062/200/200' },
        { id: 4, name: '张磊', grade: '2025级 硕士', group: '硬件组', direction: '无人机硬件系统集成', avatar: 'https://picsum.photos/id/1025/200/200' },
        { id: 5, name: '李雅睿', grade: '2025级 硕士', group: '理论组', direction: '无线通信信道建模', avatar: 'https://picsum.photos/id/1074/200/200' },
        { id: 6, name: '王佳', grade: '2024级 硕士', group: '理论组', direction: '机器学习信号检测算法', avatar: 'https://picsum.photos/id/1066/200/200' },
        { id: 7, name: '李璐', grade: '2025级 硕士', group: '其他组', direction: '无人机任务规划算法', avatar: 'https://picsum.photos/id/1083/200/200' },
        { id: 8, name: '赵阳', grade: '2024级 硕士', group: '其他组', direction: '遥感数据处理与分析', avatar: 'https://picsum.photos/id/1076/200/200' }
      ],
      graduatedStudents: [
        { id: 1, name: '黄强', graduationYear: '2020', degree: '博士', company: '华为技术有限公司 无线通信部门', avatar: 'https://picsum.photos/id/1021/200/200' },
        { id: 2, name: '周琳', graduationYear: '2021', degree: '硕士', company: '大疆创新 系统算法团队', avatar: 'https://picsum.photos/id/1000/200/200' },
        { id: 3, name: '吴杰', graduationYear: '2022', degree: '硕士', company: '顺丰速运 无人机研发中心', avatar: 'https://picsum.photos/id/1079/200/200' },
        { id: 4, name: '郑月', graduationYear: '2023', degree: '硕士', company: 'xxxxxx', avatar: 'https://picsum.photos/id/1083/200/200' },
        { id: 5, name: '孙凯', graduationYear: '2020', degree: '硕士', company: '中国移动 低空通信项目组', avatar: 'https://picsum.photos/id/1084/200/200' },
        { id: 6, name: '朱敏', graduationYear: '2021', degree: '硕士', company: '阿里巴巴 本地生活无人机配送团队', avatar: 'https://picsum.photos/id/1069/200/200' },
        { id: 7, name: '胡明', graduationYear: '2022', degree: '硕士', company: '某高校 人工智能学院', avatar: 'https://picsum.photos/id/1071/200/200' },
        { id: 8, name: '徐晓', graduationYear: '2023', degree: '硕士', company: '中国电信 低空网络规划部', avatar: 'https://picsum.photos/id/1059/200/200' }
      ]
    }
  },
  computed: {
    // 根据activeGroup筛选学生
    filteredStudents() {
      return this.students.filter(student => student.group === this.activeGroup)
    }
  },
  methods: {
    // 点击按钮切换分组
    goToGroup(groupName) {
      this.activeGroup = groupName
    }
  }
}
</script>

<style scoped>
.section-padding {
  padding: 4rem 0;
}
.team-card:hover, .student-card:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease;
}
img {
  transition: all 0.3s ease;
}
/* 按钮激活状态样式：与参考图一致的高亮效果 */
button.active {
  border-color: #3b82f6;
  background-color: #eff6ff;
  color: #3b82f6;
}
button.active span {
  background-color: #3b82f6;
  color: white;
}
</style>